@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-LightItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-Medium.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-MediumItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-SemiBold.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-SemiBoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/CormorantGaramond-BoldItalic.woff2) format('woff2');
}

* {
  box-sizing: border-box;
  text-align: center;
}

html, body {
  padding: 0;
  margin: 0;
  font-family: 'Cormorant Garamond', sans-serif;
  background-color: #212121;
  color: #fff;
  overflow: hidden;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.nswo {
  display: flex;
  align-items: center;
  align-content: space-around;
  justify-content: space-around;
  flex-direction: row;
  height: 100vh;
  flex-wrap: wrap;
  width: 400px;
  height:  400px;
  align-self: center;
  transform: rotate(45deg);
}

.nswo * {
  transform: rotate(-45deg);
  font-size: 4rem;
  font-weight: 700;
  color: #F6F6F6;
}

#n, #s, #w, #o {
  flex-grow: 6;
  width:200px;
}

h1 {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 1.1rem;
  color: #F6F6F6;
}

a, p {
  color: #F6F6F6;
  text-decoration: none;
  transition: .2s;
  font-size: 1.1rem;
}

a:hover {
  color: #D9CAB3;
}

.flex-container {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100vw;
  flex-wrap: wrap;
}

.address, .contact {
  padding-left: 10px;
  padding-right: 10px;
}


@media screen and (max-width: 755px) {
  .flex-container {
    justify-content: center;
  }
}