/* Credits:
 paper background: https://www.deviantart.com/mask-of-vice/art/Skyrim-Note-Template-V2-1038922653
 Skyrim background: https://wall.alphacoders.com/big.php?i=430447
*/

body{

    background-image: url("skyimage/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  background-position: right top;
  background-attachment: fixed;

     width: 70%;
  margin: auto;
}



main{
    
     width: 50%;
      margin: auto;
      margin-top: 25px;
    background-image: url("skyimage/Paper.png");
     background-size: cover;
      background-repeat: no-repeat;
      text-indent: 30px;
      padding: 30px;
      
}

/*Fonts
Vineritic: https://www.dafontfree.net/viner-hand-itc-regular-font/f103172.htm
Cyrodiil: https://www.dafont.com/fr/cyrodiil.font
*/

@font-face{
    font-family: vineritic;
  src: url(fonts/vineritc.ttf);
  font-style: normal;
}

@font-face{
    font-family: Cyrodill;
  src: url(fonts/Cyrodiil.otf);
  font-style: normal;
}


header{
    width:50%;

    margin: auto;
    background-color:rgba(43, 42, 42, 0.562);
    border-style: ridge;
    border-color:grey;
    border-width: 5px;
}

h1, h2, h3, h4, h5, h6 {
        font-family:Cyrodill;
        text-indent: 30px;
}

h1 {
letter-spacing: 3px;
font-size: 40px;
color: white;
}
nav a{
    font-family:Cyrodill;
    color:white;
}
nav a:hover{
    color:rgb(189, 188, 188);
}

#darkmode nav a:hover{
    color:rgb(0, 0, 0); 
}

h2{
    letter-spacing: 3px;
    font-size: 30px;
}


 p,a, ul, li, ol {
    font-family:vineritic;
    font-size: 20px;
    margin: 10px;
}

/* draw box styling... will need to edit to work with my styling */
* {box-sizing: border-box;}
        canvas {
            cursor: crosshair;
            width: 800px;
            height: 800px;
            padding: 3px;       
        }
        #title{
            margin: 5px;
    background-color:rgba(43, 42, 42, 0.562);
    border-style: ridge;
    border-color:grey;
    border-width: 5px;
        }
        .buttons {
            text-align: center
        }

        button {
            border-radius: 0;
            border: none;
            box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px rgb(199, 143, 0),inset 2px 2px #dfdfdf;
            background-color: rgb(199, 143, 0);
            font-size: 16px;
        }

        button:active {
            box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px rgb(199, 143, 0), inset 2px 2px #808080;
        }

        input[type="range"] {
            background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E");
        }

        #gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        .image-container {
              margin: 5px;
              background-color:rgba(43, 42, 42, 0.562);
              color: white;
              border-style: ridge;
              border-color:grey;
              border-width: 5px;
            padding: 5px;
            max-width: 400px;
            text-align: center;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .flex {
            display: flex;
            margin: 1em;
            gap: 100px;
        }

        .leftSidebar {
            order: 1;
            box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
            padding: 2px;
            
        }

        .rightSidebar {
             background-image: url("skyimage/Paper.png");
     background-size: cover;
      background-repeat: no-repeat;
            order: 2;
            padding: 20px;
        }
        

        .galleryContainer {
            text-align: center;
            margin: 1rem;
            padding: 0;
            display: block;
        }
        @media only screen and (max-width: 1500px) {
            body {
                text-align: center;
            }
            canvas {
                width: 100%;
                height: 100%;
                margin: auto;
            padding: 0;
            display: block;
            }

            .flex {
                flex-wrap: wrap;
                flex-flow: column;
                gap: 0;
            }
            .leftSidebar {
                order: 2;
            }
    
            .rightSidebar {
                order: 1;
            }

            ul {
                text-align: left;
            }
        }






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

    body{
        width: 100%;
    }

    main{
        width: 100%;
    }
}