/*
Coral #ef233c 
Light Navy #edf2f4
Medium Navy #4A4C73
Dark Vavy #2b2d42

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

body {
  background-color: #edf2f4;
  cursor: url('images/luffy_pointing.png'), auto;	
}

/* Dark mode */
.dark-mode {
  background-color: #1b1418;
}

.dark-mode-text {
  color: white !important;
}

.dark-mode-p {
  color: #c5dae2 !important;
}

button {
  color: #ef233c;
  background-color: transparent;
  border: 2px solid #ef233c;
  border-radius: 7px;
  padding: 11px 20px;
  float: right;
  cursor: url('images/luffy_pointing.png'), auto;	
}

button:hover {
  color: white;
  background-color: #ef233c;
}

.content {
  width: 90%;
  margin: 0 auto;
  padding-top: 5%;
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #ef233c;
  font-style: normal;
  margin-bottom: 0;
  font-size: 56pt;
  line-height: 1;
}

.subtitle {
  font-weight: 800;
  font-size: 20pt;
  margin-top: 0;
  margin-bottom: 50px;
  color: #2b2d42;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #2B2D42;
  font-style: normal;
  margin-bottom: 0;
}

p {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
  color: #4A4C73;
  font-size: 16pt;
  margin-top: 0;
}

.hello {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #ef233c;
  font-style: normal;
  margin-bottom: 0;
  font-size: 16pt;
}

a {
  font-weight: 400;
  color: #ef233c;
  font-style: underline;
  box-shadow: inset 0 0 0 0 #ef233c;
  color: #ef233c;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  cursor: url('images/luffy_pointing.png'), auto;	
}

a:hover {
  box-shadow: inset 100px 0 0 0 #ef233c;
  color: white;
}

.freya {
  width: 100%;
}

.padding-top {
  padding-top: 40%;
}

/*Breakpoints*/

@media (min-width: 768px) {
  .content {
    width: 80%;
    margin: 0 auto;
    padding-top: 10%;
  }
  .padding-top {
  padding-top: 25%;
  }
  }

  @media (min-width: 1042px) {
  .content {
    width: 45%;
    margin: 0 auto;
    padding-top: 5%;
  }
  .padding-top {
  padding-top: 25%;
  }
}