@import "/WebkitFont/stylesheet.css";

/* UTILITIES---------------------------------------------------- */

:root {
    --white: #ffffff;
    --dark-grey: #404040;
    --black: #000000;
    --background-color: #455657;
    --header-color: #f38c79;
    --accent-color1: #e5ddd8;
    --accent-color2: #ff7459;
    --accent-color3: #144c44;
  }

  [data-theme="light"] {
    --background-color: #e5ddd8;

}

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

/* NAVBAR STYLING ----------------------------------------------------*/


.navbar {
    display:flex;
    align-items: center;
    justify-content: right;
    padding: 10px;
    background-color: var(--header-color);
    color: var(--black);
    position: relative;
    z-index: 10;
    box-shadow: 0px 8px 20px rgba(0,0,0, 0.2);
  }
  
  .nav-links a {
    text-decoration: none;
    color:var(--accent-color1);
  }
  
  .menu {
    display: flex;
    gap: 2em;
    font-size: 2em;
    font-family: 'dk_display_patrolregular';
  }
  
  
  .menu li a:hover {
  color: var(--accent-color3)!important;
  }
  
  .menu li {
    padding: 5px 14px;
    color: var(--accent-color1);
    list-style: none;
  }

  li {
    list-style: none;
  }



/* BODY & CONTENT ----------------------------------------------------*/

body {
    background-color: var(--background-color);
    justify-content: center;
    align-content: center;
    margin: auto;
    min-height: 300px;
    margin-bottom: 200px;
    clear: both;
  }

h1 {
    font-family: 'dk_display_patrolregular';
    font-size: 18vmin;
    letter-spacing: 10px;
    color: var(--header-color);
}

h6 {
  font-family: 'dk_display_patrolregular';
    font-size: 4vmin;
    color: var(--header-color);
    letter-spacing: .1em;
}

a {
    text-decoration: none;
  }

  .content { 
    text-shadow: 3px 3px 15px rgba(0,0,0, 0.5);
    animation: fadeIn 3s;
    text-align: center;
    justify-content: center;
    display: grid;
    align-items: center;
  }

  .contentAlt { 
    text-shadow: 3px 3px 15px rgba(0,0,0, 0.5);
    animation: fadeIn 3s;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  .content-main {
    margin-top: 100px;
    border: none;
  }

  .content-buttons {
    border: none;
  }
  
.divBox {
  padding: 2em;
  align-items: center;
  border-radius: 50px;
  justify-content: center;
  text-align: left;
  min-height: 300px;
  background-color: var(--accent-color1);
  text-shadow: none;
  color: var(--black)!important;

}

.container {
  text-align: center;
  display: inline-table;
  margin: 50px 50px 0px 50px;
  text-shadow: none;
  font-family: 'Exo', sans-serif;
}

.headContainer {
  color: var(--white);
  font-size: 2em;
  font-family: 'dk_display_patrolregular';
}

.childContainer {
  justify-content: center;
  display: flex;
  align-items: center;
  background-color: var(--accent-color1);
  height: 600px;
  width: 600px;
  margin: 10px 10px 1px 10px;
  padding: 1em;
  border-radius: 25px;
}

.fa-copy {
  color: var(--header-color);
  padding-left: .5em;
  cursor: pointer;
}

.fa-copy:hover {
  color: var(--white);
}

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  table, td, th {  
    border: 1px solid ;
    text-align: left;
  }
  
  table {
    border-collapse: collapse;
    width: 100%;
    
  }
  
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tr:hover {
    background-color: var(--accent-color2);
  }

  .fa-arrows-rotate {
    color: var(--accent-color2);
    margin: 0px 10px 0px 5px;
    
  }
  .fa-arrows-rotate:hover {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  color: var(--accent-color3);
  }
/* BUTTONS ----------------------------------------------------*/

#contentButtons {
    margin: 1rem;
    padding: 2rem 2rem;
    text-align: center;
   }
  
   .buttonsContainer {
    display: inline-block;
    padding: 1rem 1rem;
    vertical-align: middle;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px;
    position: relative;    
    z-index: 0;  
    
   }

   .buttonsContainer a {
    color: var(--accent-color2);
   }

   .buttonText a:hover {
    color: var(--accent-color1);
   }
 
  .buttonText {
    text-align: center;
    font-size: 2em;
    font-family: 'dk_display_patrolregular';
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; 
  }


  input[type=image] {
    margin-bottom: -20px;
    -webkit-filter: drop-shadow(5px 5px 10px #222);
    filter: drop-shadow(5px 5px 10px rgba(34, 34, 34, 0.5));
    
  }
  
  input[type=image]:hover {
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
  }
  
  @keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
  }

  @keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
  }
  
  /* FOOTER ----------------------------------------------------*/

  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    background-image: url(/images/bottomborder.png);
    object-fit: contain;
    height: 259px; 
    background-size:cover;
    pointer-events: none;
    
  }

  .footer {
    width: 100%;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }


  #footer i{
    margin-left: 5px;
    margin-right: 5px;
    pointer-events: visible;
    cursor: pointer;
    color: var(--white);
    font-size: 1.3em;
  }

  #footer i:hover{
    color: #19796b;

  }


  /*LIGHT MODE TOGGLE ----------------------------------------------------*/