/* Global Settings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Arame-Thin'; 
    src: url('fonts/ArameMono-Thin.ttf'); 
}

@font-face {
    font-family: 'Arame'; 
    src: url('fonts/Arame.ttf'); 
}

:root {
    --main-orange: #f29100;
    --main-blue: #99fcd2;
    --dark-grey: #1d1d1d;
}


body{
    background-color: #1d1d1d;
    background-image: url("img/scanlines-overlay.png")
}


body img{
    width: 180px;
}

#wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
}


p{
    font-size: 30px;
    color: #f29100;
    font-family: Arame-Thin;
    text-align: center;
    line-height: 34px;
}

p span{
    color: #ffffff;
}


#content{
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 24px;
    padding: 30px;
    
    z-index: 1;
    background:
      linear-gradient(to right, var(--main-orange) 2px, transparent 2px) 0 0,
      linear-gradient(to right, var(--main-orange) 2px, transparent 2px) 0 100%,

      linear-gradient(to left, var(--main-orange) 2px, transparent 2px) 100% 0,
      linear-gradient(to left, var(--main-orange) 2px, transparent 2px) 100% 100%,

      linear-gradient(to bottom, var(--main-orange) 2px, transparent 2px) 0 0,
      linear-gradient(to bottom, var(--main-orange) 2px, transparent 2px) 100% 0,

      linear-gradient(to top, var(--main-orange) 2px, transparent 2px) 0 100%,
      linear-gradient(to top, var(--main-orange) 2px, transparent 2px) 100% 100%;
  
    background-repeat: no-repeat;
    background-size: 24px 24px;
}



@media only screen and (max-width: 767px){
    body img{
    width: 120px;
    }

    p{
        font-size: 20px;
        line-height: 24px;
    }

    #content{
        background-size: 18px 18px;
        padding: 18px;
        gap: 12px;
    }
}