@charset "utf-8";
/* CSS Document */

            :root {
                --header-image: url('');
                --body-bg-image: url('Warning.jpg');

                /* colors */
                --content: #000000;
            }

            /* if you have the URL of a font, you can set it below */
            /* feel free to delete this if it's not your vibe */

            /* this seems like a lot for just one font and I would have to agree 
    but I wanted to include an example of how to include a custom font.
    If you download a font file you can upload it onto your Neocities
    and then link it! Many fonts have separate files for each style
    (bold, italic, etc. T_T) which is why there are so many!
    
    */
		
            @font-face {
                font-family: Playfair;
                src: url('PlayfairDisplay-VariableFont_wght.ttf');
            }
			@font-face {
                font-family: Oswald;
                src: url('Oswald-VariableFont_wght.ttf');
            }

              /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 900px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #696969;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
				text-decoration: none;
            }

            #header {
                width: 100%;
                background-color: #5e4e8c;
                /* header color here! */
                height: 150px;
                /* this is only for a background image! */
                /* if you want to put images IN the header, 
      you can add them directly to the <div id="header"></div> element! */
                background-image: var(--header-image);
                background-size: 100%;
            }

            /* navigation section!! */


body {
                font-family: 'Playfair', sans-serif;
                margin: 0;
                background-color: black;
                /* you can delete the line below if you'd prefer to not use an image */
                background-size: 65px;
                color: #000000;
                background-image: var(--body-bg-image);
            }

body {
   /* background: #22C1C3; */
    background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
    
    min-height: 100vh; 
}

body {
  color: #1d2263;
}

a {
  color: #cb4106;
}

.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
 /* background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%); */
}

img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

 #navbar {
  width:100px;    
  position: fixed;
  background:#8b8b8b;
  border-bottom-left-radius:0.5em;
  border: 1px solid black;
box-shadow: 5px 5px 18px 0px rgba(0,0,0,0.23);
  transform-origin: left top;
  transform:rotate(-90deg) translateX(-100%);
  z-index: 1;
}

#navbar .active {
    color:rgb(255, 255, 255);
    background-color: #5f8ef2;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 100px;
    padding-left: 10px;
    margin-left: -10px;
}

#navbar ul {    
  float:left;
  line-height:45px;
                  padding-right: 10px;
                  padding-left: 10px;
margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
				font-family: Oswald;
                font-size: x-large;
}

#navbar a {
color: #FFFFFF;
}

#navbar li a:hover {
                color: #696969;
                text-decoration: none;
            }

#topbox {
position: relative;
    width: 100%;
height: 100px;
/*background-image: url('../ill/ocean.jpg');*/
}

#topbox_content{
    position: absolute;
    bottom: 10px;
    right: 10px;
}

            #footer_copyright {
				color: #FFFFFF;
                background-color: none;
              
                /* background color for footer */
                width: 100%;
                height: 40px;
                padding-top: 30px;
                text-align: center;
                /* this centers the footer text */
            }