@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Allura&family=Quintessential&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');

.nav {
     z-index: 2;
     position: fixed;
     width: 100%;
     top: 0;
     backdrop-filter: blur(300px);
}

.body_main {
     margin-top: 12%;
}

.body_main nav {
     display: flex;
     justify-content: center;
}

.main_img {
     position: relative;
     box-shadow: 3px 0 3px 0 grey;
}

.text {
     position: absolute;
     top: 50%;
     left: 30%;
     transform: translate(-50%, -50%);
     font-family: 'Allura', cursive;
     font-size: 4em;
}

.cake_display {
     margin: 15px;
     margin-top: 35px;
     display: grid;
     grid-template-columns: auto auto auto auto auto;
}

.items {
     text-align: center;
     padding: 10px;
     width: 250px;
}

.items h4 {
     margin: -3px;
     font-family: 'Quintessential', cursive;
     letter-spacing: 1px;
}

.items h3 {
     cursor: pointer;
     background-color: rgba(255, 206, 133, 0.937);
     box-shadow: 2px 2px gray;
}

.items a {
     text-decoration: none;
     color: black;
}

.items p {
     font-size: 14px;
     border-radius: 5px;
     transform: rotate(-20deg);
     font-family: 'Jost', sans-serif;
     padding: 5px;
     background-color: red;
     color: white;
     position: absolute;
}

.items a:hover {
     font-size: large;
}

.tooltiptext {

     font-size: 17px;
     background-color: rgba(0, 0, 0, 0.904);
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px 3px;
     letter-spacing: 1px;
}

.items:hover {
     border: 1px solid black;
}

fieldset {
     text-align: center;
}

details {
     margin: 12px;
     display: inline-block;
}

summary {
     padding: 9px;
     font-size: 20px;
     font-family: 'Quintessential', cursive;
     font-weight: 900;
     letter-spacing: 1px;
     border-radius: 5px;
}

summary:hover {
     cursor: pointer;
     box-shadow: 2px 2px 2px 2px gray;
}

details .cake_display .items {
     padding: 20px;
}

legend {
     font-size: 17px;
     font-style: italic;
}

fieldset {
     box-shadow: 2px 2px 2px gray;
}

fieldset a {
     text-decoration: none;
     color: black;
}

.hide_before {
     display: none;
}

.align {
     text-align: center;
}

.fc summary {
     text-align: center;
     background-image: url("fc_bg.jpg");
     text-shadow: 2px 2px white;
     font-size: 25px;
     letter-spacing: 2px;
}

.fc p {
     font-size: 17px;
}

.fc a {
     text-decoration: none;
     color: white;
}

.fc a:hover {
     text-decoration: underline;
}

.fc_pics span {
     letter-spacing: 0.5px;
     font-weight: 600;
     border-radius: 35px;
     font-size: 23px;
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 50px;
     padding-right: 50px;
     background-color: rgb(4, 173, 4);
}

.fc_pics {
     background-color: black;
     color: white;
     text-align: center;
     padding: 5px;
     padding-top: 15px;
     border: 2px solid black;
     margin: 10px;
}

#hide_confirm {
     display: none;
}

#ok {
     border: none;
     background: #56b0ed;
     background-image: -webkit-linear-gradient(top, #56b0ed, #0a2080);
     background-image: -moz-linear-gradient(top, #56b0ed, #0a2080);
     background-image: -ms-linear-gradient(top, #56b0ed, #0a2080);
     background-image: -o-linear-gradient(top, #56b0ed, #0a2080);
     background-image: linear-gradient(to bottom, #56b0ed, #0a2080);
     -webkit-border-radius: 28;
     -moz-border-radius: 28;
     border-radius: 28px;
     font-family: Arial;
     color: #ffffff;
     font-size: 15px;
     padding: 10px 20px 10px 20px;
     text-decoration: none;
}

#ok:hover {
     background: #6f1b96;
     background-image: -webkit-linear-gradient(top, #6f1b96, #b321b5);
     background-image: -moz-linear-gradient(top, #6f1b96, #b321b5);
     background-image: -ms-linear-gradient(top, #6f1b96, #b321b5);
     background-image: -o-linear-gradient(top, #6f1b96, #b321b5);
     background-image: linear-gradient(to bottom, #6f1b96, #b321b5);
     text-decoration: none;
}

.popup fieldset {

     padding: 18px;
     height: 200px;
     width: 380px;
}

.popup {
     visibility: hidden;
     background-color: white;
     position: fixed;
     z-index: 1;
     left: 50%;
     top: 50%;
     -ms-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

.popup fieldset label {

     font-family: 'Akaya Telivigala', cursive;
     font-size: 20px;
}

.pop {

     letter-spacing: 1px;
}

.close {
     display: inline-flex;
     cursor: pointer;
     font-size: 11px;

}

.popup .confirm {
     border: none;
     background: #56b0ed;
     background-image: -webkit-linear-gradient(top, #56b0ed, #0a2080);
     background-image: -moz-linear-gradient(top, #56b0ed, #0a2080);
     background-image: -ms-linear-gradient(top, #56b0ed, #0a2080);
     background-image: -o-linear-gradient(top, #56b0ed, #0a2080);
     background-image: linear-gradient(to bottom, #56b0ed, #0a2080);
     -webkit-border-radius: 28;
     -moz-border-radius: 28;
     border-radius: 28px;
     font-family: Arial;
     color: #ffffff;
     font-size: 15px;
     padding: 10px 20px 10px 20px;
     text-decoration: none;
}

.popup .confirm:hover {
     background: #6f1b96;
     background-image: -webkit-linear-gradient(top, #6f1b96, #b321b5);
     background-image: -moz-linear-gradient(top, #6f1b96, #b321b5);
     background-image: -ms-linear-gradient(top, #6f1b96, #b321b5);
     background-image: -o-linear-gradient(top, #6f1b96, #b321b5);
     background-image: linear-gradient(to bottom, #6f1b96, #b321b5);
     text-decoration: none;
}

.go_to_menu {
     box-shadow: 2px 2px 2px 2px gray;
     padding: 6px;
     border-radius: 12px;
     display: flex;
     justify-content: space-around;
     animation: go_to 2s infinite;
}
@keyframes go_to {
     0%{
          border: 3px solid rgb(240, 24, 60);
     }
     50%{
          border: 3px solid rgb(240, 24, 60);
     }
     100%{
          border: 3px solid #6f1b96;
     }
}
.view {

     border-radius: 20px;
     padding: 7px;
     padding-left: 30px;
     padding-right: 30px;
     background: #6f1b96;
     ;
}

.view a {
     text-decoration: none;
     font-family: 'Courier New', Courier, monospace;
     font-size: 20px;
     font-weight: 900;
     color: rgb(255, 228, 233);
     text-shadow: 2px 2px black;
}

.desc {
     font-family: 'Courier New', Courier, monospace;
     font-size: 20px;
     font-weight: 900;
     letter-spacing: 0.5px;
     padding: 7px;
     color: black;
}

@media only screen and (max-width: 550px) {

     .body_main {
          margin-top: 65%;
          margin-bottom: 25%;
     }

     .nav img {
          width: 9em;
          margin-left: 5px;
     }

     .hide {
          display: none;
     }

     .hide_before {
          display: contents;
     }

     .text {
          padding: 20px;
          padding-left: 50px;
          padding-right: 50px;
          background-image: url("cake_nav.png");
          font-size: 10vw;
     }

     fieldset {
          margin-top: 10%;
     }

     .cake_display {

          margin: 15px;
          margin-top: 35px;
          display: grid;
          grid-template-columns: auto;

     }

     .cake_display .items {
          margin: auto;
     }

     .fc_pics img {
          width: 100%;
     }

     details {
          width: 100%;
     }

     .fc summary {
          text-align: center;
          width: 240px;
          font-size: 17px;
          margin: auto;
     }

     .align {
          margin-top: 15px;
          text-align: center;
     }

     .popup fieldset {
          padding: 6px;
          height: 250px;
          width: 270px;
     }

     .popup fieldset label {

          font-family: 'Akaya Telivigala', cursive;
          font-size: 19px;
     }

     .close {
          display: inline-flex;
          cursor: pointer;
          font-size: 12px;

     }

     #ok {
          font-size: 11px;
     }

     .confirm {
          font-size: 11px;
     }

     .tooltiptext {
          margin-top: -15px;
          font-size: 14px;
          background-color: rgba(0, 0, 0, 0.904);
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 3px 3px;
          letter-spacing: 0.5px;
     }
     .go_to_menu{
          margin-top: 43px;
          margin-bottom: -25px;
          text-align: center;
          display: block;
     }
}