@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&family=Montserrat:wght@200;400&display=swap');

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  }

:root{
  --textColour: #9100c8;
  --linkColour: #c12771;
  --hoverColour: #c12771;
  }

body{
  background-image: url("/images/sparkle_background.gif");
  background-repeat: repeat;
  margin: 1rem auto;
  width: 80vw;
  }
  
.column {
  float: left;
  border-style: dashed;
  border-color: var(--textColour);
  border-radius: 12px;
  padding: 5px;
  background-color: rgba(255,255,255,0.2);
}

.left {
  width: 66%;
  margin-right: 2px;
}

.right {
  width: 30%;
  float: right;
  margin-left: 2px;
}
 
  
  p{
    text-align: center;
    color: var(--textColour);
    font-family: 'Montserrat', sans-serif;
    }
    
  h1{
    text-align: center;
    color: var(--textColour);
    font-family: 'Darumadrop One', cursive;
    position: relative;
    }
  h1 img {
    max-width: 5rem;
    max-height: 5rem;
    display: inline-block;
    position: absolute;
    top: 10%;
    } 
    
  h1 img.left{
    left: 60%;
    transform: scaleX(-1);
    }
  
  h1 img.right {
    right: 60%;
    }
    
  h2{
    text-align: center;
    color: var(--hoverColour);
    font-family: 'Darumadrop One', cursive;
    font-weight: bold;
    margin-bottom: 2rem;
    }  
    
  hr{
    text-align: center;
    color: var(--linkColour);
    opacity: 0.5;
    border-top: 5px dashed;
    }
    
  a{
    text-align: center;
    text-decoration: none;
    color: var(--linkColour);
    font-family: 'Montserrat', sans-serif;
    }
  
  ul{
    text-align: center;
    color: var(--hoverColour);
    font-family: 'Montserrat', sans-serif;
    }
    
.hidden {
  display: none;
  }