@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
    --main-color: #FF4E4E;
    --max-width:1200px;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    scroll-behavior: smooth;
}
body{
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    background-attachment: fixed;
}

#innerbody{
    width:100%;
    max-width:var(--max-width);
    position:relative;
}

section{
    min-height:30px;
    width:100%;
    color:rgb(220, 220, 220);
}

#home > div,
#info > div{
    width:100%;
    background-color:rgb(20, 20, 20);
    padding:100px 80px;
}

nav{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width:100%;
}

nav a{
    color:rgb(220, 220, 220);
    font-family: 'Alumni Sans';
    font-size:clamp(19px, 4vw, 32px);
    text-decoration: none;
    position: relative;
}

nav a::before{
    content:"";
    position: absolute;
    bottom:0;
    left:0;
    transform:translateY(-5px);
    background-color: white;
    height:1px;
    width:100%;
    transition:all 0.4s;
}

nav a:hover::before{
    background-color:var(--main-color);
    transform:translateY(0);
}

nav img{
    width:30%;
}
#home{
    margin:15px 0;
}
#home select{
    background-color:rgb(60, 60, 60);
    border:1px solid var(--main-color);
    transition:background-color 0.4s;
    margin-bottom:50px;
}

#home *{
    font-family:'Alumni Sans';
    
    font-weight:300;
    color:rgb(236, 236, 236);
}

#home select:hover{
    cursor:pointer;
    background-color:rgb(50, 50, 50);
}

#home option:checked{
    background-color:rgb(20, 20, 20);
}

#home div *{
    font-size: 35px;
}
#home div > h1{
    text-align: center;
    font-size:65px;
}
#home div input[type="checkbox"]{
    height:22px;
    width:22px;
    background:transparent;
    accent-color: var(--main-color);
    
}
#home div input[type="checkbox"]:hover{
    cursor:pointer;
}
#home div select ~ label:hover{
    cursor:pointer;
    color:white;
}

#generateBoard{
    margin-top:50px;
    padding:20px 100px;
    background-color:#700000;
    border:none;
    font-size:55px;
    font-weight:700;
    transition:background-color 0.4s;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    text-transform: uppercase;
    pointer-events: all; /*changed in api.js*/
}

#generateBoard:hover{
    cursor:pointer;
    background-color:#490000;
}

#errorText{
    margin-top:40px;
}
#errorText,
#YGOPRODeckStatus{
    display:none;
}

#info{
    font-family:'Poppins';
    margin:15px 0;
}

#info div h1{
    font-weight:300;
    font-size:2.2em;
    margin-bottom:15px;
    position: relative;
}

#info div h1::before{
    content:"";
    position: absolute;
    bottom:3px;
    left:0;
    height:1px;
    width:100%;
    background-color: var(--main-color);
}
#info div p{
    font-weight:300;
    font-size:clamp(0.9em, 1.1vw, 1.4em);
    
}

#info div a{
    color:rgb(220, 220, 220);
    transition:color 0.4s;
}

#info div a:hover{
    color:white;
}


#boardOverlay,
#boardSubmitOverlay{
    position:absolute;
    width:100%;
    min-height:100%;
    background-color: rgb(26, 26, 26);
    z-index: 2;
    top:0;
    left:0;
    padding:15px 25px 80px 25px;
    font-family: 'Poppins';
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    opacity:0;
    pointer-events: none;
    transition:opacity 0.4s;
}
#boardOverlay > h2{
    font-weight:200;
    font-size:18px;
    color:rgb(161, 161, 161)
}

#boardOverlay > h1{
    font-weight:500;
    font-size:26px;
    margin-bottom:20px;
}
#boardOverlay > p{
    margin-top:20px;
    width:95%;
}
#boardOverlay > p span{
    font-size:20px;
    font-weight:500;
    color:var(--main-color);
}


.board{
    width:85%;
    max-height:400px;
    table-layout: fixed;
    border-spacing:5px;
    margin:25px 0;
}
.EMZRow{
    position:relative;
    bottom:10px;
}
#handRow{
    position:relative;
    top:15px;
}
.moveLeft{
    position:relative;
    right:25px;
}
.moveRight{
    position:relative;
    left:25px;
}

.usableCell{
    border:1px solid #727272;
    position:relative;
}
.usableCell img{
    width:100%;
    transition:all 0.3s;
    vertical-align:middle;
}
.usableCell img:hover{
    transform:scale(1.01);
    cursor:pointer;
}

.cellNumber{
    position:absolute;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    color:#727272;
    z-index: -1;
    text-align:center;
}


#boardOverlay > h3{
    margin-bottom:40px;
    font-weight:300;
    color:gray;
    font-size:14px;
}

#newBoard{
    color:rgb(220, 220, 220);
    font-family:'Poppins';
    padding:20px 60px;
    margin-bottom:30px;
    background-color:#700000;
    border:none;
    font-size:35px;
    font-weight:700;
    transition:background-color 0.4s;
    text-transform: uppercase;
}
#newBoard:hover{
    cursor:pointer;
    background-color:#490000;;
}

#boardHistoryDiv{
    width:100%;
    text-align: center;
}
#boardHistoryDiv > h1{
    font-size:75px;
    font-family:'Alumni Sans';
    font-weight:300;
    line-height: 0.7;
    padding-top:50px;
}
#boardHistoryDiv > h2{
    font-size:20px;
    font-weight:300;
    color:rgb(120, 120, 120);
    margin-bottom:25px;
}
#boardHistory{
    display:flex;
    flex-direction: column-reverse;
    justify-content: center;
}
#boardHistory > p{
    font-size:22px;
    margin:5px auto;
    cursor:pointer;
    position:relative;
}
#boardHistory > p::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background-color: var(--main-color);
    opacity: 0;
    transition: opacity 0.4s;
}
#boardHistory > p:hover::before{
    opacity: 1;
}

#closeBoardOverlay,
#closeBoardSubmit{
    color:rgb(220, 220, 220);
    text-decoration: none;
    font-size:25px;
    position:relative;
    transition:color 0.4s;
    align-self:flex-start;
    padding:5px 10px;
}
#closeBoardOverlay:hover,
#closeBoardSubmit:hover{
    color:white;
}
#closeBoardOverlay::before,
#closeBoardSubmit::before{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    height:2px;
    width:0;
    background-color: var(--main-color);
    transition:width 0.7s;
}

#closeBoardOverlay:hover::before{
    width:120%;
}

#cardDescription{
    position:absolute;
    background-color: rgb(50, 50, 50);
    left:50%;
    top:20%;
    transform: translateX(-50%);
    width:90%;
    padding:20px;
    opacity: 0;
    pointer-events: none;
    border:1px solid var(--main-color);
    z-index: 3;
}
#cardDescription:hover{
    cursor:pointer;
}
#cardDescription h5{
    font-weight:300;
    color:gray;
}
#cardName{
    color:var(--main-color);
    font-weight:400;
}
#cardEffect{
    font-weight:300;
}
#cardEffect span{
    color: var(--main-color);
}

.cardsOverlay{
    position:absolute;
    left:0;
    top:0;
    background-color: rgba(0, 0, 0,0.85);
    width:100%;
    min-height:100vh;
    padding:40px 15px;
    opacity:0;
    pointer-events: none;
    display:flex;
    flex-direction: column;
    align-items:center;
    transition:opacity 0.2s;
    cursor:pointer;
}   

.cardsOverlay h1{
    font-size:52px;
    color:var(--main-color);
}

.cardsOverlay h2{
    font-size:14px;
    color:gray;
    font-weight:300;
}

.overlayCards{
    padding:10px 0;
    margin:20px 0;
    max-width:100%;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
}
.overlayCards img{
    margin:5px 0;
    width:clamp(200px, 45%, 400px);
    transition:all 0.2s;
    padding:4px;
}

.overlayCards img:hover{
    cursor:pointer;
    transform:translateY(-3px);
    box-shadow:0 0 4px var(--main-color);
}
#innerbody > a,
#innerbody > h5{
    color:rgb(77, 77, 77);
    font-family: 'Poppins';
    text-decoration: none;
    font-size:12px;
    padding:9px;
    font-weight:400;
}
#innerbody > a:hover{
    color:rgb(85, 85, 85);
}

.imginv{
    opacity:0;
    pointer-events: none;
}




@media screen and (max-width:900px){
    #home div *{
        font-size: 25px;
    }
    #home div input[type="checkbox"]{
        height:17px;
        width:17px;
    }
    #generateBoard{
        padding:20px 60px;
        font-size:35px;
    }
    nav{
        padding:30px 0;
    }
    .cellNumber{
        font-size:8px;
    }
}
@media screen and (max-width:700px){
    #home > div,
    #info > div{
        background-color:rgb(20, 20, 20);
        padding:80px 40px;
    }
    #boardOverlay{
        padding:10px;
    }
    #boardDiv{
        width:100%;
    }
    .moveLeft{
        right:15px;
    }
    .moveRight{
        left:10px;
    }
}

@media screen and (max-width:500px){
    #home div *{
        font-size: 18px;
    }
    #home div input[type="checkbox"]{
        height:12px;
        width:12px;
    }
    #generateBoard{
        padding:15px 40px;
        font-size:25px;
    }
    #newBoard{
        font-size:25px;
        padding:15px 23px;
    }
}